<template>
    <div>
        <el-container>
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-input
                                placeholder="输入用户名"
                                v-model="page.qData.username"
                                size="small"
                                maxlength="10"
                                clearable>
                        </el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-select v-model="page.qData.enable" clearable placeholder="是否禁用" size="small">
                            <el-option
                                    v-for="item in enableOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        <el-select v-model="page.qData.locked" clearable placeholder="是否冻结" size="small">
                            <el-option
                                    v-for="item in lockedOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">搜索</el-button>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="text" @click="aData.visible = true">添加</el-button>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <div style="margin-top: 5px">
                    <el-table
                            :data="table.tableData"
                            v-loading="table.loading"
                            style="width: 100%">
                        <el-table-column
                                label="用户名"
                                width="180">
                            <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                                    <p>用户名: {{ scope.row.username }}</p>
                                    <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium">{{ scope.row.username }}</el-tag>
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="是否可用"
                                width="180">
                            <template slot-scope="scope">
                                <i class="el-icon-check" v-if="scope.row.enable"></i>
                                <i class="el-icon-close" v-else></i>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="是否冻结"
                                width="180">
                            <template slot-scope="scope">
                                <i class="el-icon-check" v-if="scope.row.locked"></i>
                                <i class="el-icon-close" v-else></i>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-main>
            <el-footer>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page.currentPage.current"
                            :page-sizes="[7,14,21,28]"
                            :page-size="page.currentPage.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total">
                    </el-pagination>
                </div>
            </el-footer>
        </el-container>
        <!--弹出框-->
        <div>
            <el-dialog title="新增用户信息" :visible.sync="aData.visible" width="30%">
                <el-form :model="aData.form" :rules="aData.rules" ref="aForm" v-loading="aData.loading">
                    <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
                        <el-input type="text" v-model="aData.form.username" autocomplete="off" placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
                        <el-input type="password" v-model="aData.form.password" autocomplete="off" placeholder="密码"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="aData.visible = false">取 消</el-button>
                    <el-button type="primary" @click="handleAdd">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="修改用户信息" :visible.sync="uData.visible" width="30%">
                <el-form :model="uData.form" :rules="uData.rules" ref="uForm" v-loading="uData.loading">
                    <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
                        <el-input type="text" v-model="uData.form.username" autocomplete="off" placeholder="用户名" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="是否可用" :label-width="formLabelWidth">
                        <el-radio-group v-model="uData.form.enable">
                            <el-radio :label="false">否</el-radio>
                            <el-radio :label="true">是</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否冻结" :label-width="formLabelWidth">
                        <el-radio-group v-model="uData.form.locked">
                            <el-radio :label="false">否</el-radio>
                            <el-radio :label="true">是</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="uData.visible = false">取 消</el-button>
                    <el-button type="primary" @click="handleEdit">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog
                    title="提示"
                    :visible.sync="dData.visible"
                    width="30%"
                    center>
                <span>您确定要删除用户: {{dData.form.username}}</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dData.visible = false">取 消</el-button>
                    <el-button type="primary" @click="handleDelete">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "user",
        data() {
            return {
                //分页
                page: {
                    currentPage:{
                        current: 1,
                        size: 7,
                    },
                    total: 0,
                    qData:{
                        username:'',
                        locked: undefined,
                        enable: undefined,
                    }
                },
                enableOptions: [{
                    value: true,
                    label: '可用'
                }, {
                    value: false,
                    label: '不可用'
                }],
                lockedOptions:[{
                    value: true,
                    label: '冻结'
                }, {
                    value: false,
                    label: '未冻结'
                }],
                //表格
                table: {
                    tableData: [],
                    loading:false
                },
                //添加
                aData: {
                    visible: false,
                    loading: false,
                    form: {
                        username: '',
                        password: '',
                    },
                    rules: {
                        username: [
                            { required: true, message: '请输入用户名', trigger: 'blur' },
                            { min: 3, message: '长度不少于 3 个字符', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '请输入密码', trigger: 'blur' },
                            { min: 3, message: '长度不少于 3 ', trigger: 'blur' }
                        ]
                    }
                },
                //修改
                uData: {
                    visible: false,
                    loading: false,
                    form: {
                        id: -1,
                        username: '',
                        locked: false,
                        enable: false
                    },
                    rules: {
                        username: [
                            { required: true, message: '请输入用户名', trigger: 'blur' },
                            { min: 3, message: '长度不少于 3 个字符', trigger: 'blur' }
                        ],
                    }
                },
                //删除
                dData: {
                    visible: false,
                    loading: false,
                    form: {
                        id: -1,
                        username: '',
                    },
                },
                formLabelWidth: '120px'
            }
        },
        methods: {
            //每页大小
            handleSizeChange(size) {
                console.log(`每页 ${size} 条`);
                this.page.currentPage.size=size;

                if (this.page.keyword){
                    this.handleSearch();
                }else {
                    let userVo=this.page.currentPage;
                    this.loadTableData(userVo);
                }
            },
            //当前页
            handleCurrentChange(current) {
                console.log(`当前页: ${current}`);
                this.page.currentPage.current=current;
                if (this.page.qData){
                    this.handleSearch();
                }else {
                    let userVo=this.page.currentPage;
                    this.loadTableData(userVo);
                }
            },
            //修改
            handleEdit(index, row) {
                if(row){
                    //修改弹出框信息
                    console.log(`当前索引: ${index}`);
                    Object.assign(this.uData.form,row);
                    this.uData.visible=true;
                }else {
                    //提交用户修改信息
                    const _this = this;
                    this.$refs.uForm.validate((valid) => {
                        if (valid) {
                            _this.uData.loading=true;
                            let userVo=_this.uData.form;
                            this.putRequestJson("/user/u",userVo)
                                .then(resp =>{
                                    if (resp && resp.data && resp.data.code === '200') {
                                        _this.uData.loading=false;
                                        _this.uData.visible=false;
                                        //清空数据
                                        _this.uData.form={
                                            id: -1,
                                            username: '',
                                            password: '',
                                            locked: false,
                                            enable: false
                                        };
                                        _this.handleSearch();
                                    }else {
                                        _this.uData.loading=false;
                                    }
                                })
                        }
                    });
                }
            },
            //删除
            handleDelete(index, row) {
                if(row){
                    //修改弹出框信息
                    console.log(`当前索引: ${index}`);
                    this.dData.form.id=row.id;
                    this.dData.form.username=row.username;
                    this.dData.visible=true;
                }else {
                    //提交用户删除信息
                    const _this = this;
                    _this.dData.loading=true;
                    let ids=[];
                    ids.push(_this.dData.form.id);
                    this.deleteRequest("/user/d/"+ids)
                        .then(resp =>{
                            if (resp && resp.data && resp.data.code === '200') {
                                _this.dData.loading=false;
                                _this.dData.visible=false;
                                //清空数据
                                _this.dData.form={
                                    id: -1,
                                    username: '',
                                };
                                _this.handleSearch();
                            }else {
                                _this.dData.loading=false;
                            }
                        })
                }
            },
            //添加用户
            handleAdd(){
                const _this = this;
                this.$refs.aForm.validate((valid) => {
                    if (valid) {
                        _this.aData.loading=true;
                        let userVo=_this.aData.form;
                        this.postRequestJson("/user/a",userVo)
                            .then(resp =>{
                                if (resp && resp.data && resp.data.code === '200') {
                                    _this.aData.loading=false;
                                    _this.aData.visible=false;
                                    //清空数据
                                    _this.aData.form.username='';
                                    _this.aData.form.password='';
                                    _this.handleSearch();
                                }else {
                                    _this.aData.loading=false;
                                }
                            })
                    }
                });
            },
            //搜索
            handleSearch(){
                let userVo={
                    username: this.page.qData.username,
                    enable:this.page.qData.enable,
                    locked:this.page.qData.locked,
                    current: this.page.currentPage.current,
                    size: this.page.currentPage.size
                };
                const _this = this;
                _this.table.loading=true;
                this.getRequest("/user/search",userVo)
                    .then(resp =>{
                        if (resp && resp.data && resp.data.code === '200') {
                            const data = resp.data;
                            _this.table.tableData=data.result.records;
                            _this.page.total=data.result.total;
                            _this.table.loading=false;
                        }else {
                            _this.table.loading=false;
                        }
                    })
            },
            //装载用户
            loadTableData(userVo){
                const _this = this;
                _this.table.loading=true;
                this.getRequest("/user/g",userVo)
                    .then(resp =>{
                        if (resp && resp.data && resp.data.code === '200') {
                            const data = resp.data;
                            _this.table.tableData=data.result.records;
                            _this.page.total=data.result.total;
                            _this.table.loading=false;
                        }else {
                            _this.table.loading=false;
                        }
                    })
            },
        },
        mounted() {
            //装载第一页数据
            let userVo = this.page.currentPage;
            this.loadTableData(userVo);
        }
    }
</script>

<style scoped>

    .input-search {
        width: 150px;
        margin-left: 300px;
    }

    .input-form{
        width: 150px;
    }

    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 150%;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        align-content: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>